<template>
	<div class="subpage status">
		<div class="content">
			<div class="status-imgbox">
				<img src="@/assets/img/home_img20.png" alt="">
			</div>
			<p class="text1">支付成功！</p>
			<p class="text2">实付金额：{{paySuccessData.payMoney}}元</p>
			<div class="text3-box">
				<span class="text3">采购数量：{{paySuccessData.quantity}}头</span>
				<span class="text3">总重量：{{paySuccessData.productTotalWeight}}kg</span>
			</div>
			<div class="btn-box">
				<div class="button" @click="tohome">返回首页</div>
				<div class="button" @click="toPurchaseOrder">查看订单</div>
			</div>
		</div>
		<div class="bg"></div>
		<div class="list-head">
			<div class="list-head-icon clearfix">
				<img src="@/assets/img/home_img05.png" alt="">
				<h3>产业升级</h3>
			</div>
		</div>
		<!-- <purchase-com></purchase-com> -->
		<van-list
			v-model="loading"
			:immediate-check="false" 
			:finished="finished" 
			finished-text="已加载全部了哦～"
			@load="onLoadMore"
		>
			<div class="purchase">
				<div class="mainList">
					<div class="list clearfix" v-for="(item, index) in mainData" :key="index" @click="toDetail(item.id)">
						<ul class="ul">
							<li>
								<div class="top">
									<h3>{{item.productName}}({{item.farmName}})</h3>
									<span class="price">{{item.salesPrice}}<i>{{item.salePriceUnit}}</i></span>
								</div>
								<div class="center">
									<div>
										<span class="qk">{{item.saleType}}</span>
										<span class="ps">{{item.shipmentCategory}}</span>
										<span class="by">{{item.postage}}</span>
									</div>
									<span class="address">{{item.originProvince}}</span>
								</div>
								<div class="bottom">
									<span class="bx">
										<img src="@/assets/img/home_img09.png" alt="" class="bao">
										<img src="@/assets/img/home_img10.png" alt="" class="bao2">
										{{item.insurance}}
									</span>
									<span class="jh">交货期：{{item.deliveryMonth}}个月</span>
								</div>
							</li>
						</ul>
						<div class="purchase-btn clearfix">
							<van-button round class="u-btn-default bind-btn" v-if="item.numSaves !== 0">采购</van-button>
							<van-button round class="u-btn-default bind-btn active" :disabled="isDisabled" v-else>售罄</van-button>
						</div>
					</div>
				</div>
			</div>
		</van-list>
	</div>
</template>

<script>
	
	import PurchaseCom from '@/views/purchase/Purchase.vue'
	export default {
		components: {
			PurchaseCom
		},
		data(){
			return {
				isDisabled: true,
				mainData: [],
				paySuccessData: {
					
				},
				loading: false,
				finished: false,
				pageIndex: 1,
				pageSize: 3
			}
		},
		created(){
			this.productListData()   //  推荐资源,商品列表
			this.paySuccess()
		},
		methods: {
			paySuccess(){
				this.$api.get('/api/order/pay_success/' + this.$route.query.orderId)
				.then(({data})=>{
					console.log(data)
					this.paySuccessData = data;
				})
			},
			//  推荐资源,商品列表
			productListData(){
				let getData = {
					pgCt: this.pageIndex,
					pgSz: this.pageSize
				}
				this.$api.get('/api/product/list', getData)
				.then((data)=>{
					this.mainData = data.data.records;
				})
			},
			// 返回首页
			tohome(){
				this.$router.push({
					path: '/'
				})
			},
			toPurchaseOrder(){
				this.$router.push({
					path: '/my/purchaseOrder/purchaseOrderDetail/' + this.$route.query.orderId
				})
			},
			toDetail(id){
				this.$router.push({
					path: '/home/detail/' + id
				})
			},
			// 上拉加载请求方法  这里只显示三条，假的上拉加载
			onLoadMore() {
				setTimeout(() => {
				    // 加载状态结束
				    this.loading = false;
					this.finished = true;
				}, 500);
			},
			
		}
	}
	
	
</script>

<style lang="scss" scoped>
	@import "@/assets/css/homeCom.scss";
	.active{
		background: #D0CFCF !important;
	}
	
	.bg{
		width: 100%;
		height: 10px;
		background-color: #f8f8f8;
	}
	.status {
		background-color: #fff;
		.content{
			padding-bottom: 24px;
			.status-imgbox{
				margin-top: 60px;
				text-align: center;
				margin-bottom: 22px;
				img{
					width: 144px;
					margin-right: 20px;
				}
			}
			.text1{
				font-size: 20px;
				color: #344047;
				font-weight: 500;
				text-align: center;
				margin-bottom: 16px;
			}
			.text2{
				font-size: 16px;
				color: #5D6164;
				text-align: center;
				margin-bottom: 10px;
			}
			.text3-box{
				display: flex;
				justify-content: space-between;
				padding: 0 79px;
				margin-bottom: 48px;
				.text3{
					color: #969C9E;
				}
			}
			.btn-box{
				display: flex;
				justify-content: space-between;
				padding: 0 49px;
				.button{
					width: 120px;
					height: 36px;
					line-height: 36px;
					border: 1px solid #31BC8D;
					color: #31BC8D;
					border-radius: 30px;
					text-align: center;
					font-size: 16px;
				}
			}
		}
		.list-head {
			width: 100%;
			display: flex;
			height: 48px;
			line-height: 48px;
			border-bottom: 1px solid #f2f2f2;
			padding: 0 16px;
			h3{
				font-size: 16px;
				color: #344047;
				font-weight: 500;
				margin-left: 10px;
				float: left;
			}
			.list-head-icon{
				width: 100%;
				display: flex;
				align-items: center;
				img{
					width: 24px;
					vertical-align: middle;
					margin-bottom: 4px;
				}
			}
		}
		.purchase {
			background-color: #fff;
			width: 100%;
			.list {
				border-bottom: 1px solid #f2f2f2;
				.ul {
					width: 75% !important;
					border: none;
					float: left;
					.center {
						justify-content: space-between;
						.address {
							font-size: 12px;
							color: #969C9E;
							float: right;
						}
					}
					
				}
				.purchase-btn {
					width: 25%;
					height: 110px;
					display: flex;
					justify-content: center;
					align-items: center;
				
					.bind-btn {
						width: 68px;
						height: 28px;
						line-height: 28px;
						background: linear-gradient(90deg, #31BC8D 0%, #A6E29B 100%);
						color: #fff;
						font-size: 14px;
						box-shadow: none;
						border-radius: 14px;
					}
				}
			}
		}
	}
	
	

	
	
	
</style>
